<!-- 供应商管理 -->
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      :inline="true"
      class="globalSerchFormStyle"
      label-width="100px"
      ref="ruleForm"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="供应商名称" prop="supplierName">
            <el-input
              v-model="queryParams.supplierName"
              placeholder="请输入供应商名称"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商编码" prop="supplierCode">
            <el-input
              v-model="queryParams.supplierCode"
              placeholder="请输入供应商编码"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              size="small"
              style="width: 190px"
              placeholder="请选择状态"
            >
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="global_el_rowStyle">
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="getList">
          查询
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="resetForm">
          重置
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" plain @click="addSupplier">
          新增供应商
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini"
          :disabled="!multipleSelection.length"
          @click="deleteOpen"
        >
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="handleExport"
          >导出
        </el-button>
      </el-col>
    </el-row>

    <!-- table -->
    <el-table
      v-loading="loading"
      :data="classTableDataList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="left" />
      <el-table-column label="供应商编码" prop="supplierCode" align="left" />
      <el-table-column label="供应商名称" prop="supplierName" align="left" />
      <el-table-column label="联系人" prop="contacts" align="left" />
      <el-table-column label="电话" prop="phone" align="left" />
      <el-table-column label="状态" prop="status" align="left">
        <template slot-scope="scope">
          {{ scope.row.status == "1" ? "启用" : ""
          }}{{ scope.row.status == "0" ? "停用" : "" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editSupplier(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除该供应商吗？"
            @onConfirm="confirmReference(scope.row.supplierId)"
          >
            <el-button
              type="text"
              slot="reference"
              size="small"
              style="margin-left: 20px"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加 -->
    <SupplierManagementAdd
      :dialogAdd.sync="dialogAdd"
      :formData="formData"
    ></SupplierManagementAdd>
  </div>
</template>

<script>
import {
  supplierList,
  supplierDelete,
  supplierExport,
} from "@/api/nonOil/class";
import SupplierManagementAdd from "./supplierManagement_add.vue";
export default {
  name: "SupplierManagement",
  components: { SupplierManagementAdd },
  data() {
    return {
      formData: {},
      dialogAdd: false,
      loading: false,
      total: 0,
      multipleSelection: [],
      queryParams: {
        enterpriseId: null,
        stationId: null,
        pageNum: 1,
        pageSize: 10,
        supplierName: null,
        supplierCode: null,
        status: null,
      },
      classTableDataList: [],
    };
  },

  created() {
    // 油企
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      this.queryParams.enterpriseId = this.presentEnterprise.enterpriseId;
    }
    // 油站账号登录
    if (this.presentSation) {
      this.queryParams.stationId = this.presentSation;
    }
    this.getList();
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 重置
    resetForm() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.$refs.ruleForm.resetFields();
      this.getList();
    },

    // 单个删除
    confirmReference(supplierIds) {
      supplierDelete({ supplierIds }).then((res) => {
        this.$message({
          type: "success",
          message: res.msg,
        });
        this.getList();
      });
    },

    // 批量删除
    deleteOpen() {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let multipleSelection = [];
          multipleSelection = this.multipleSelection.map((item) => {
            return item.supplierId;
          });

          supplierDelete({ supplierIds: multipleSelection.join() }).then(
            (res) => {
              this.$message({
                type: "success",
                message: res.msg,
              });
            }
          );
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getList() {
      this.loading = true;
      supplierList(this.queryParams)
        .then((res) => {
          this.classTableDataList = res.rows;
          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return supplierExport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    // 点击新增
    addSupplier() {
      this.formData = { status: "1" };
      this.dialogAdd = true;
    },

    // 点击编辑
    editSupplier(row) {
      this.formData = row;
      this.dialogAdd = true;
    },
  },
  watch: {
    dialogAdd: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        if (oldVal) {
          this.getList();
        }
      },
    },
  },
};
</script>

<style scoped lang="scss"></style>
